import { Helmet, HelmetProvider } from 'react-helmet-async';
import { connect } from 'umi';
import React, { useMemo } from 'react';
import { Row, Col, Grid } from "antd";
import styles from './UserLayout.less';
import Logo from '@/components/Logo';
let col = { xs: 0, sm: 0, md: 8, lg: 9, xl: 10, xxl: 12 },
  cols = { xs: 24, sm: 24, md: 16, lg: 15, xl: 14, xxl: 12 };
const { useBreakpoint } = Grid;

const UserLayout = (props) => {
  let { children } = props;
  const screens = useBreakpoint();
  return (
    <HelmetProvider>
      <div className={styles.containers} style={{ backgroundImage: `url(${screens.md ? require("@/assets/bg.png") : require("@/assets/bgnone.png")})`, backgroundRepeat: "no-repeat" }}>
        <div className={styles.header}>
          <Logo style={{ color: "#fff" }} size={!screens.md ? "small" : "default"}></Logo>
        </div>
        <Row style={{ flex: 1, display: "flex", overflow: "hidden" }}>
          <Col {...col}>
          </Col>
          <Col {...cols} className="center">
            {children}
          </Col>
        </Row>
        <div className="center">
          <a style={{ textAlign: "center", color: "#fff", marginBottom: 24 }}>
            CopyRight © 1999-2021 ALi213.Net All Right Reserved 江苏南高 版权所有
          </a>
        </div>
      </div>
    </HelmetProvider>
  );
};

export default connect(({ settings, global }) => ({ ...settings, global }))(UserLayout);
